<template>
  <div>

    <el-row>
      <el-col :span="4">&nbsp &nbsp</el-col>
      <el-col :span="12">
        <el-button @click="addClassroom" type="success" round>新增教室 </el-button>
        <el-table :data="page.records" border>
          <el-table-column prop="classroomId" label="教室ID" width="115">
          </el-table-column>
          <el-table-column prop="classroomArea" label="面积" width="135">
          </el-table-column>
          <el-table-column prop="peopleNum" label="容纳人数" width="130">
          </el-table-column>
          <el-table-column prop="classroomType" label="类型" width="130">
          </el-table-column>
          <el-table-column prop="classroomState" label="类型状态" width="130">
            <template slot-scope="scope">
              <template v-if="scope.row.classroomState == 1">正常</template>
              <template v-if="scope.row.classroomState == 0">下架</template>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="126">
            <template #default="scope">
              <el-button @click="disableClassroom(scope.row.id)" v-if="scope.row.classroomState == '1'" type="text"
                size="small">禁用</el-button>
              <el-button @click="enableClassroom(scope.row.id)" v-if="scope.row.classroomState == '0'" type="text"
                size="small">启用</el-button>

            </template>
          </el-table-column>

        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.pageNum" :page-sizes="[1, 2, 3, 5]" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>

        <el-dialog title="请输入教室信息" :visible.sync="showAddwindow" width="35%">

          教室id：<el-input-number v-model="add.classroomId" placeholder="请输入教室id" style="width: 50%;"
            controls-position="right" :min="1"></el-input-number><br>
          教室人数：<el-input-number v-model="add.peopleNum" controls-position="right" :min="1"
            placeholder="请输入教室人数"></el-input-number><br>
          教室面积：<el-input v-model="add.classroomArea" placeholder="请输入教室面积" style="width: 50%;"></el-input><br>
          教室类型：<el-input v-model="add.classroomType" placeholder="请输入教室类型" style="width: 50%;"></el-input><br>
          <span slot="footer">
            <el-button @click="showAddwindow = false" type="danger" round>取 消</el-button>
            <el-button @click="addVenueClassroom()" type="success" round>确 认</el-button>
          </span>
        </el-dialog>

      </el-col>

      <el-col :span="10">&nbsp</el-col>

    </el-row>

  </div>
</template>

<script>
  export default {
    name: "VenueClassroom",
    data() {
      return {
        add: {}, // 新增的dialog收集的对象
        showAddwindow: false, // 新增的窗口
        page: {},
        param: {
          pageNum: 1,
          pageSize: 5,
        },
      }
    },
    methods: {
      // 启用教室
      enableClassroom(id) {
        this.$http.get("/venue/yVenueClassroom/enableClassroom", {
          params: {
            id: id
          }
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.loadAllVenueClassroom();
        });
      },
      // 禁用教室
      disableClassroom(id) {
        this.$http.get("/venue/yVenueClassroom/dropClassroom", {
          params: {
            id: id
          }
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.loadAllVenueClassroom();
        });
      },
      addVenueClassroom() {
        this.$http.post("/venue/yVenueClassroom/addClassroom", this.add).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.showAddwindow = false;
          this.loadAllVenueClassroom();
        });
      },
      addClassroom() {
        this.showAddwindow = true;
      },
      handleSizeChange(val) {
        this.param.pageSize = val;
        this.loadAllVenueClassroom();
      },
      handleCurrentChange(val) {
        this.param.pageNum = val;
        this.loadAllVenueClassroom();
      },
      loadAllVenueClassroom() {
        this.$http.get("/venue/yVenueClassroom/pageAllClassroom", {
          params: {
            pageNum: this.param.pageNum,
            pageSize: this.param.pageSize
          }
        }).then(resp => {
          this.page = resp.data.data;
        })
      }
    },
    created() {
      this.loadAllVenueClassroom();
    }
  }
</script>

<style>
</style>
